<template>
  <div style="background-color:#F9F9F9">
    <page-header
        zhTitle="产品与服务"
        enTitle="Products & Service"
        :pageHeaderImage="pageHeaderImage"
    ></page-header>
    <div class="tartan-container" style="margin-top:0">
      <div class="tartan-item app-container">
        <h2 class="title">
          {{ $t('home1.oilDevelop') }}
        </h2>
        <p class="describe">
          达坦能源拥有经验丰富的服务团队，可以为油气工程项目提供相关的设备产品以及配套服务，包括安装调试，现场管理，操作培训以及售后服务等。
        </p>
        <div style="display:flex;flex-wrap:wrap;justify-content:space-between">
          <div style="width:200px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/yqtkfjsfw/zjsj.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0">{{ $t('home1.drillingDesign') }}</tartan-btn>
          </div>
          <div style="width:200px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/yqtkfjsfw/dxfw.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0"
            >{{ $t('home1.directionalWell') }}
            </tartan-btn
            >
          </div>
          <div style="width:200px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/yqtkfjsfw/yqtpj.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0"
            >{{ $t('home1.OGDesign') }}
            </tartan-btn
            >
          </div>
          <div style="width:200px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/yqtkfjsfw/yqtcl.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0"
            >{{ $t('home1.OGCalculation') }}
            </tartan-btn
            >
          </div>
          <div style="width:200px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/yqtkfjsfw/yqtkf.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0">{{ $t('home1.OGService') }}</tartan-btn>
          </div>
        </div>
      </div>
    </div>
    <div
        class="tartan-container"
        style="margin-top:14px;background-color:white;"
    >
      <div class="tartan-item app-container">
        <h2 class="title">
          {{ $t('home1.directionalWellTech') }}
        </h2>
        <div style="display:flex;flex-wrap:wrap;justify-content:space-between">
          <div style="width:200px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/dxjjs/szclgj.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0"
            >{{ $t('home1.mwdTool') }}
            </tartan-btn
            >
          </div>
          <div style="width:200px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/dxjjs/slzdq.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0"
            >{{ $t('home1.hydraulicOscillator') }}
            </tartan-btn
            >
          </div>
          <div style="width:200px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/dxjjs/xzdxxt.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0"
            >{{ $t('home1.rotaryGuide') }}
            </tartan-btn
            >
          </div>
          <div style="width:200px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/dxjjs/jxdlzj.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0"
            >{{ $t('home1.DHMotor') }}
            </tartan-btn
            >
          </div>
          <div style="width:200px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/dxjjs/zt.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0">{{ $t('home1.drillingBit') }}</tartan-btn>
          </div>
        </div>
      </div>
    </div>
    <div
        class="tartan-container"
        style="margin-top:14px;background-color:white;"
    >
      <div class="tartan-item app-container">
        <h2 class="title">
          {{ $t('home1.completionEquipments') }}
        </h2>
        <div style="display:flex;flex-wrap:wrap;justify-content:space-between">
          <div style="width:560px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/wjgj/xzsggq.png"
                alt=""
            />
            <tartan-btn style="width:160px;margin:16px 0"
            >{{ $t('home1.rotaryScraper') }}
            </tartan-btn
            >
          </div>
          <div style="width:560px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/wjgj/ffzzz.png"
                alt=""
            />
            <tartan-btn style="width:160px;margin:16px 0"
            >{{ $t('home1.hydraulicOscillator') }}
            </tartan-btn
            >
          </div>
        </div>
      </div>
    </div>
    <div
        class="tartan-container"
        style="margin-top:14px;background-color:white;"
    >
      <div class="tartan-item app-container">
        <h2 class="title">
          {{ $t('home1.coiledTubingDrilling') }}
        </h2>
        <div style="display:flex;flex-wrap:wrap;justify-content:space-between">
          <div style="width:260px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/lxygzj/mdytsslzdq.png"
                alt=""
            />
            <tartan-btn style="width:240px;margin:16px 0">
              {{ $t('home1.MIHydraulicOscillator') }}
            </tartan-btn>
          </div>
          <div style="width:260px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/lxygzj/lxygjt.png"
                alt=""
            />
            <tartan-btn style="width:240px;margin:16px 0"
            >{{ $t('home1.coiledOilPipeFittings') }}
            </tartan-btn
            >
          </div>
          <div style="width:260px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/lxygzj/mdtzc.png"
                alt=""
            />
            <tartan-btn style="width:240px;margin:16px 0">
              {{ $t('home1.Motor Head Assembly') }}
            </tartan-btn>
          </div>
          <div style="width:260px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/lxygzj/mx.png"
                alt=""
            />
            <tartan-btn style="width:240px;margin:16px 0">{{ $t('home1.grindingShoes') }}</tartan-btn>
          </div>
        </div>
      </div>
    </div>
    <div
        class="tartan-container"
        style="margin-top:14px;background-color:white;"
    >
      <div class="tartan-item app-container">
        <h2 class="title">
          {{ $t('home1.wellCompletionFracturing') }}
        </h2>
        <div style="display:flex;flex-wrap:wrap;justify-content:space-between">
          <div style="width:560px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/wjyl/lywjjjfa.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0"
            >{{ $t('home1.openHoleCompletionSolution') }}
            </tartan-btn
            >
          </div>
          <div style="width:560px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/wjyl/tgwjjjfa.png"
                alt=""
            />
            <tartan-btn style="width:200px;margin:16px 0"
            >{{ $t('home1.casingCompletionSolution') }}
            </tartan-btn
            >
          </div>
        </div>
      </div>
    </div>
    <div
        class="tartan-container"
        style="margin-top:14px;background-color:white;"
    >
      <div class="tartan-item app-container">
        <h2 class="title">
          {{ $t('home1.greenIntelligent') }}
        </h2>
        <div style="display:flex;flex-wrap:wrap;justify-content:space-between">
          <div style="width:260px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/lszncyjs/zhwyznwxsgy.png"
                alt=""
            />
            <tartan-btn style="width:250px;margin:16px 0">
              {{ $t('home1.loadDisplacementIntelligent') }}
            </tartan-btn>
          </div>
          <div style="width:260px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/lszncyjs/gdhbznkzg.png"
                alt=""
            />
            <tartan-btn style="width:250px;margin:16px 0"
            > {{ $t('home1.photoelectricComplementaryIntelligent') }}
            </tartan-btn
            >
          </div>
          <div style="width:260px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/lszncyjs/wdcygyzyrj.png"
                alt=""
            />
            <tartan-btn style="width:250px;margin:16px 0">
              {{ $t('home1.professionalSoftware') }}
            </tartan-btn>
          </div>
          <div style="width:260px;text-align:center">
            <img
                width="100%"
                src="../../../public/img/product/lszncyjs/gdhbywglpt.png"
                alt=""
            />
            <tartan-btn style="width:250px;margin:16px 0"
            > {{ $t('home1.photoelectricComplementary') }}
            </tartan-btn
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from "../../components/PageHeader.vue";
import pageHeaderImage from "../../../public/img/bg_cpyfw.png";
import TartanBtn from "../../components/TartanBtn.vue";

export default {
  name: "product",
  components: {
    PageHeader,
    TartanBtn,
  },
  data() {
    return {pageHeaderImage};
  },
  methods: {},
};
</script>

<style lang="scss"></style>
